<template>
  <div class="side-bar">
    <div class="FriendCardList listContainer">
      <div class="title">
        <span>好友列表</span>
        <i :class="friendCardListFlex === 1 ? 'icon-close' : 'icon-add'" @click="updateShowFriendList"></i>
      </div>
      <div class="CardList">
        <FriendCard
          v-if="friendCardListFlex === 1"
          v-for="item in friendList"
          :class="sessionIdSelected === item._session_id ? 'active' : ''"
          :data="item"
          :type="0"
          :background-color="colorList[0]"
          @click="updateSelectedFunc(item._session_id, 0)"
        />
      </div>
    </div>
    <div class="GroupCardList listContainer">
      <div class="title">
        <span>群列表</span>
        <i :class="groupCardListFlex === 1 ? 'icon-close' : 'icon-add'" @click="updateShowGroupList"></i>
      </div>
      <div class="CardList">
        <FriendCard
          v-if="groupCardListFlex === 1"
          v-for="item in groupList"
          :class="sessionIdSelected === item._session_id ? 'active' : ''"
          :data="item"
          :type="1"
          :background-color="colorList[0]"
          @click="updateSelectedFunc(item._session_id, 1)"
        />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import FriendCard from "./FriendCard/FriendCard.vue";
import { userJoinListStore } from "@/stores/userChatList";
import { sessionIdSelectedFunc, updateSelectedFunc } from "@/views/ChatView/Hooks";
import { colorList, showListFunc } from "@/components/SideBar/Hooks";
import type { Ref } from "vue";

// 获取好友/群列表
let userJoinListStoreIns = userJoinListStore();
const { friendList, groupList } = storeToRefs(userJoinListStoreIns);

// 获取选中的对话
const [getSessionIdSelected] = sessionIdSelectedFunc();
const sessionIdSelected: Ref<string> = getSessionIdSelected();

// 是否显示好友列表
const [getFriendCardListFlex, updateShowFriendList] = showListFunc();
const friendCardListFlex = getFriendCardListFlex();

// 是否显示群列表
const [getGroupCardListFlex, updateShowGroupList] = showListFunc();
const groupCardListFlex = getGroupCardListFlex();
</script>

<style scoped lang="less">
.side-bar {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 4px;
  margin: 20px 10px;
  width: 290px;
  overflow-y: auto;

  :deep(.message-item.active) {
    background-color: v-bind(colorList [1]);
  }

  .message-item:not(:first-child) {
    margin-top: 4px;
  }

  .FriendCardList {
    max-height: 80%;
    overflow: hidden;
    transition: all 0.5s linear;
  }

  .GroupCardList {
    max-height: 80%;
    overflow: hidden;
    transition: all 0.5s linear;
  }
  .CardList {
    flex: 1;
    max-height: calc(100% - 35px);
    overflow-y: auto;
  }

  .listContainer {
    color: white;
    font-size: 15px;
    background-color: var(--background-secondary);
    border-radius: 10px;

    &:not(:first-child) {
      margin-top: 10px;
    }

    .title {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;

      span {
        padding: 0 12px;
        line-height: 35px;
      }

      i {
        margin-right: 12px;
        width: 25px;
        height: 25px;
        cursor: pointer;
      }
    }

  }

}

</style>
